<template>
  <div class="introduction">
    <common-header color="rgba(255,93,93,1)"></common-header>
    <banner :option="bannerOption"></banner>
    <div class="utils">
      <div class="utils-title">促销类营销工具</div>
      <swiper class="utils-wrapper" :options="swiperOption" ref="mySwiper">
        <swiper-slide
          v-for="(util, utilIndex) in utils"
          :key="utilIndex">
          <div class="util-item">
            <img class="util-item-img" :src="util.imgUrl">
            <div class="util-item-label">{{ util.label }}</div>
          </div>
        </swiper-slide>
      </swiper>
      <img class="utils-prev" src="~@/assets/images/prev.png" @click="handlePrev('mySwiper')">
      <img class="utils-next" src="~@/assets/images/next.png" @click="handleNext('mySwiper')">
    </div>
    <div class="utils utils2">
      <div class="utils-title">吸粉类营销工具</div>
      <swiper class="utils-wrapper" :options="swiperOption" ref="mySwiper2">
        <swiper-slide
          v-for="(util2, util2Index) in utils2"
          :key="util2Index">
          <div class="util-item">
            <img class="util-item-img" :src="util2.imgUrl">
            <div class="util-item-label">{{ util2.label }}</div>
          </div>
        </swiper-slide>
      </swiper>
      <img class="utils-prev" src="~@/assets/images/prev.png" @click="handlePrev('mySwiper2')">
      <img class="utils-next" src="~@/assets/images/next.png" @click="handleNext('mySwiper2')">
    </div>
    <img class="middle-banner" src="~@/assets/images/middle-banner2.png">
    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader.vue'
import Banner from '@/components/Banner.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'introduction',
  components: {
    CommonHeader,
    CommonFooter,
    Banner,
    swiper,
    swiperSlide
  },
  computed: {
    utilsSwiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  data() {
    return {
      bannerOption: {
        path: '',
        imgUrl: require('@/assets/images/introduction-banner.png')
      },
      utils: [
        {
          label: '多人拼团',
          imgUrl: require('@/assets/images/pintuan.png')
        },
        {
          label: '砍价零元购',
          imgUrl: require('@/assets/images/kanjia.png')
        },
        {
          label: '限时秒杀',
          imgUrl: require('@/assets/images/miaosha.png')
        },
      ],
      utils2: [
        {
          label: '萌宝投票',
          imgUrl: require('@/assets/images/toupiao.png')
        },
        {
          label: '新春大转盘',
          imgUrl: require('@/assets/images/zhuanpan.png')
        },
        {
          label: '天降红包雨',
          imgUrl: require('@/assets/images/hongbaoyu.png')
        },
      ],
      swiperOption: {
        slidesPerView : 3,
        slidesPerGroup : 3,
        loop: true,
      }
    }
  },
  created() {
    if (window.innerWidth < 450) {
      this.$set(this.swiperOption, 'slidesPerView', 1)
      this.$set(this.swiperOption, 'slidesPerGroup', 1)
    }
  },
  methods: {
    handlePrev(name) {
      this.$refs[name].swiper.slidePrev()
    },
    handleNext(name) {
      this.$refs[name].swiper.slideNext()
      // this.utilsSwiper.slideNext()
    },
  }
}
</script>

<style lang="scss" scoped>
$phone-width: 450px;
.introduction {
  .utils {
    position: relative;
    margin: 100px 0 50px;
    &.utils2 {
      .utils-wrapper {
        .util-item {
          width: 210px;
          height: 156px;
          background: rgba(247,247,247,1);
          border-radius: 1px;
          text-align: center;
          padding-top: 4px;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          &-img {
            width: 196px;
            height: 130px;
          }
          &-label {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateX(0);
          }
        }
      }
    }
    &-title {
      color: #333;
      font-size: 15px;
      text-align: center;
      margin-bottom: 24px;
    }
    &-prev {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 50%;
      transform: translateX(-430px);
      top: 50%;
      cursor: pointer;
    }
    &-next {
      width: 40px;
      height: 40px;
      position: absolute;
      transform: translateX(390px);
      left: 50%;
      top: 50%;
      cursor: pointer;
    }
    &-wrapper /deep/{
      width: 800px;
      .swiper-slide {
        display: flex;
        justify-content: center;
      }
      .util-item {
        &-img {
          width: 210px;
        }
        &-label {
          font-size: 12px;
          color: #515151;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
  .middle-banner {
    width: 100%;
    margin-top: 150px;
  }
}
@media screen and (max-width: $phone-width) {
  .introduction {
    .utils {
      margin: 50px 0 20px;
      &-wrapper /deep/{
        width: 100%;
        margin: 0 auto;
        .swiper-slide {
          /*width: 58% !important;*/
        }
      }
      &-prev {
        left: 0;
        transform: translateX(0);
        z-index: 2000;
      }
      &-next {
        right: 0;
        left: auto;
        transform: translateX(0);
        z-index: 2000;
      }
      .util-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &-label {
          width: 100%;
          transform: translateX(0);
          margin-top: 10px;
        }
        &-img {
          width: 70% !important;
          margin: 0 auto;
        }
      }
      &.utils2 {
        .util-item {
          width: 70% !important;
          height: auto !important;
          &-img {
            width: 80% !important;
            height: auto !important;
          }
        }
      }
    }
    .middle-banner {
      min-height: 120px;
      margin-top: 20px;
    }
  }
}
</style>
